<template>
  <div class="RightTop">
    <h3>近7日人口流失统计</h3>
    <!-- 提供一个容器来渲染 ECharts 图表 -->
    <div class="chart" id="rightTopChart" style="width: 400px; height: 280px;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  data() {
    return {
      cities: [
        {
          name: '北京',
          data: [
            { data: '3.7', value: 500 },
            { data: '3.8', value: 600 },
            { data: '3.9', value: 550 },
            { data: '3.10', value: 700 },
            { data: '3.11', value: 650 },
            { data: '3.12', value: 800 },
            { data: '3.13', value: 750 }
          ]
        },
        {
          name: '上海',
          data: [
            { data: '3.7', value: 400 },
            { data: '3.8', value: 450 },
            { data: '3.9', value: 500 },
            { data: '3.10', value: 550 },
            { data: '3.11', value: 600 },
            { data: '3.12', value: 650 },
            { data: '3.13', value: 700 }
          ]
        },
        {
          name: '广州',
          data: [
            { data: '3.7', value: 300 },
            { data: '3.8', value: 350 },
            { data: '3.9', value: 400 },
            { data: '3.10', value: 450 },
            { data: '3.11', value: 500 },
            { data: '3.12', value: 550 },
            { data: '3.13', value: 600 }
          ]
        },
        {
          name: '深圳',
          data: [
            { data: '3.7', value: 350 },
            { data: '3.8', value: 400 },
            { data: '3.9', value: 450 },
            { data: '3.10', value: 500 },
            { data: '3.11', value: 550 },
            { data: '3.12', value: 600 },
            { data: '3.13', value: 650 }
          ]
        }
      ],
      myChart: null
    };
  },
  methods: {
    initChart() {
      // 1、获取元素
      // const chartDom = document.getElementById('rightTopChart');
      // 2、初始化
      this.myChart = echarts.init(document.getElementById('rightTopChart'));

      // 3、格式化数据
      // 通常X轴数据相同，所以只需要取第一个城市的数据即可
      const xAxisData = this.cities[0].data.map(item => item.data); // X 轴数据（日期）
      const seriesData = this.cities.map(city => ({
        name: city.name,
        type: 'line',
        stack: '总量', // 堆叠折线图的关键配置，将所有城市的折线数据堆叠在一起，形成一个总量的展示。
        data: city.data.map(item => item.value) // Y 轴数据（人口流失值）
      }));

      // 4、配置
      const option = {
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(0, 0, 0, 0.8)', // 提示框背景色
          textStyle: {
            color: '#ffffff' // 提示框文字颜色
          }
        },
        legend: {
          data: this.cities.map(city => city.name), // 图例数据
          bottom: 10,
          textStyle: {
            color: '#ffffff' // 图例文字颜色
          }
        },
        xAxis: {
          type: 'category',
          data: xAxisData, // X 轴数据
          name: '日期',
          axisLine: {
            lineStyle: {
              color: '#ffffff' // X 轴颜色
            }
          },
          axisLabel: {
            color: '#ffffff' // X 轴标签颜色
          }
        },
        yAxis: {
          type: 'value',
          name: '人口流失值',
          axisLine: {
            lineStyle: {
              color: '#ffffff' // Y 轴颜色
            }
          },
          axisLabel: {
            color: '#ffffff' // Y 轴标签颜色
          }
        },

        series: seriesData, // 系列数据
        backgroundColor: 'transparent'
      };

      // 5、渲染图表
      this.myChart.setOption(option);
    }
  },
  mounted() {
    this.initChart();
  }
};
</script>

<style scoped>
.RightTop {
  width: 100%;
  height: 300px;
  margin-left: -200px;
  margin-top: 140px;
  /* border: 2px solid beige; */
}

h3 {
  text-align: center;
  margin-bottom: 20px;
  color: white;
  /* 标题文字颜色 */
  font-size: 24px;
  font-weight: bold;
}

.chart {
  margin: 0 auto;
}
</style>